<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定位问题</title>
		<style>
			/* 定位：①相对定位：相对于父级，没有父级相对于body
			        ②绝对定位：根据页面左上角进行定位，失去文档流
			 */
			div{
				width: 200px;
				height: 200px;
				background: #f00;
				border-radius: 50%;
				position: relative; /* 2D相对定位*/
				pos.ition: absolute; /* 3D绝对定位*/
				left: 0;
				top: 0;
			}
			.d1{
				background: #00ff00;
			}
			.d3{
				background: #ffff00;
			}
			.d5{
				background: #ff5500;
			}
			.d2{
				border-radius: 0;
			}
			/* 所有的效果改成四方块，不允许使用div选择器，类选择器 */
			/* 类选择器：通过别名选择元素    css语法：  .别名{}
			                               html语法：class+"别名"或class="别名1，别名2..."
										   
			多个别名，建议不超3个，用空格分隔，解决元素选择器，只选择元素名选择器							   
			*/
		   .d{
			   border-radius: 0;
		   }
	        
		</style>
	</head>
	<body>
		<div class="d1 d"></div>
		<div class="d2 d"></div>
		<div class="d3 d"></div>
		<div class="d4 d"></div>
		<div class="d5 d"></divd>
	</body>
</html>